<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=0">
    <title>屏幕共享</title>
    <link rel="icon" href="">
    <link rel="stylesheet" href="../../css/bootstrap.min.css">
  </head>
  <body>
  	<form class="form-inline">
        <div class="form-group">
            <label></label>
            <button id="shareBtn" type="button" class="btn btn-primary">共享</button>
            <button id="stopBtn" type="button" class="btn btn-primary" style="display: none;">停止共享</button>
        </div>
  	</form>

  	<div class="panel panel-default">
  	  <div class="panel-heading">
  	    <h3 class="panel-title">已共享</h3>
  	  </div>
  	  <div id="sharedScreen" class="panel-body" style="padding: 0;">

  	  </div>
  	</div>

  	<script type="text/javascript" src="../../js/jquery.min.js"></script>
    <script type="text/javascript" src="../../js/bootstrap.min.js"></script>
    <script type="text/javascript" src="../../js/template-web.js"></script>
    <script type="text/javascript">
        nw.Screen.Init(); 
        var server;
        var mediaStreamTrack;
        var screenWidth=1024;
        var screenHeight=768;
        $("#shareBtn").click(function(){
            $(this).hide();
            $("#stopBtn").show();
            nw.Screen.chooseDesktopMedia(["window","screen"], 
                function(streamId) {
                    var vid_constraint = {
                        mandatory: {
                            chromeMediaSource: 'desktop', 
                            chromeMediaSourceId: streamId, 
                            maxWidth: screenWidth, 
                            maxHeight: screenHeight
                        }, 
                        optional: []
                    };
                    
                    navigator.webkitGetUserMedia({audio: false, video: vid_constraint}, function(stream){
                        mediaStreamTrack = typeof stream.stop === 'function' ? stream : stream.getVideoTracks();
                        var video = document.createElement('video');
                        //$(video).css("width","100%");
                        video.srcObject = stream;
                        video.onloadedmetadata = function(e){
                            video.play();  
                        };
                        document.getElementById("sharedScreen").appendChild(video);

                        var canvas=document.createElement("canvas");
                        canvas.width=screenWidth;
                        canvas.height=screenHeight;
                        var context=canvas.getContext('2d');
                        setInterval(function(){
                            context.drawImage(video,0,0);
                        },40);
                        
                        var fs=require('fs');
                        var screenHtml=fs.readFileSync(process.cwd()+"/tools/apps/screen_share/screen.html");
                        
                        var http=require("http");
                        server=http.createServer(function(req,res){
                            if(req.url.startsWith('/refresh')){
                                res.writeHead(200,{
                                    "content-type":"text/plain"
                                });
                                var base64Data=canvas.toDataURL('image/png');
                                res.write(base64Data);
                                res.end();
                            }else{
                                res.writeHead(200,{
                                    "content-type":"text/html"
                                });
                                res.write(screenHtml);
                                res.end();
                            }
                        });
                        server.listen(3000);
                    }, function(err){
                        console.log("The following error occurred: " + err.name);
                    });
                }
            );
        });

        $("#stopBtn").click(function(){
            $(this).hide();
            $("#shareBtn").show();
            $("#sharedScreen").html('');
            server.close();
            mediaStreamTrack && mediaStreamTrack.stop();
        });
    </script>
  </body>
</html>